<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>sale</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!--引入ajax请求封装函数-->
  <script src="ajax.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      text-decoration: none;
      list-style: none;
      box-sizing: border-box;
    }

    /*总的*/
    .scroll {
      height: 100vh;
      overflow-x: hidden;
    }

    .shoppingCar {
      opacity: 0.5;
      position: fixed;
      left: 40px;
      bottom: 100px;
    }

    .personalCenter {
      opacity: 0.5;
      position: fixed;
      right: 40px;
      bottom: 200px;
    }

    .quitMarket {
      opacity: 0.5;
      position: fixed;
      right: 40px;
      bottom: 100px;
    }

    .setInfo {
      opacity: 0.5;
      position: fixed;
      right: 40px;
      bottom: 150px;
    }

    .el-header {
      opacity: 0.6;
      background-color: #409EFF;
      color: #FFFFFF;
      text-align: center;
      vertical-align: middle;
      line-height: 38px;
      font-size: 20px;
      box-shadow: 0 5px 5px #ccc;
      /*定位*/
      position: fixed;
      top: 10%;
      left: 0;
      z-index: 999;
    }

    .demo-table-expand {
      font-size: 0;
    }

    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }

    /*头像上传*/
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
    }

    .avatar {
      width: 120px;
      height: 120px;
      display: block;
    }

    .bottom {
      margin-top: 13px;
      line-height: 12px;
    }

    .button {
      padding: 0;
      float: right;
    }

    .image {
      width: 100%;
      display: block;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both
    }

    /*轮播图*/
    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
  </style>
</head>
<body>
<div id="app" class="scroll">
  <template>
    <el-container>
      <!--头部-->
      <el-header style="height: 38px;">
        <span class="el-icon-s-shop">良心小超市</span>
      </el-header>
      <el-main>
        <!--一键回到顶部-->
        <el-backtop target=".scroll" visibility-height:50></el-backtop>

        <div style="width: 75%;margin: 0 auto">
          <!--外部提示文字-->
          <el-tooltip class="item" effect="dark" content="打开购物车" placement="right">
            <el-button class="shoppingCar" @click="carDrawer" type="primary" icon="el-icon-shopping-cart-1"
                       circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="前往个人账户" placement="left">
            <el-button class="personalCenter" @click="personalDrawer" trightype="success" icon="el-icon-money"
                       circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="退出超市" placement="left">
            <el-button class="quitMarket" @click="quitMarket" type="danger" icon="el-icon-delete" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="设置个人信息" placement="left">
            <el-button class="setInfo" @click="setInfoDrawer" type="info" icon="el-icon-s-tools" circle></el-button>
          </el-tooltip>
          <!--轮播图左中右-->
          <div style="width: 100%;float: left">
            <div style="width: 16%;margin: 0 1% 0 3%;float: left">
              <template>
                <el-carousel height="380px" direction="vertical" :interval="2000" indicator-position="none">
                  <el-carousel-item v-for="(item) in leftScrollImag" :key="item.id">
                    <img :src="item.imag" style="width: 100%; height:100%; ">
                  </el-carousel-item>
                </el-carousel>
              </template>
            </div>
            <div style="width: 60%;margin: 0 ;float: left">
              <template>
                <el-carousel indicator-position="outside" height="380px">
                  <el-carousel-item v-for="(item) in centerScrollImag" :key="item.id">
                    <img :src="item.imag" style="width: 100%; height:100%; ">
                  </el-carousel-item>
                </el-carousel>
              </template>
            </div>
            <div style="width: 16%;margin: 0 3% 0 1%;float: left">
              <template>
                <el-carousel height="380px" direction="vertical" :interval="2500" indicator-position="none">
                  <el-carousel-item v-for="(item) in rightScrollImag" :key="item.id">
                    <img :src="item.imag" style="width: 100%; height:100%; ">
                  </el-carousel-item>
                </el-carousel>
              </template>
            </div>
          </div>
          <!--商品展示区-->
          <div style="width: 100%;float: left">
            <el-divider><i class="el-icon-suitcase-1"></i></el-divider>
            <template>
              <el-tabs tab-position="left">
                <el-tab-pane label="饮料酒水">
                  <span slot="label"><i class="el-icon-cold-drink">饮料酒水</i></span>
                  <el-row>
                    <div style="margin-left: 5%;">
                      <el-col :span="5" v-for="(item,index) in itemInfo[0].listInfo" :key="item.gid"
                              style="margin: 0 3% 3% 0">
                        <el-card :body-style="{ padding: '0px' }" shadow="hover">
                          <img :src=imagDeal(item.picture) class="image">
                          <div style="padding: 8px;">
                            <span>{{item.name}}</span>
                            <div class="bottom clearfix">
                              <el-tooltip class="item" effect="dark" content="商品详情" placement="left">
                                <el-button @click="dialog(item)" type="primary" icon="el-icon-document" circle
                                           size="small"
                                           style="float: left"></el-button>
                              </el-tooltip>
                              <el-button class="button" @click="addCar(item)" type="primary" round size="small"
                                         icon="el-icon-shopping-cart-2" style="float: right">加入购物车
                              </el-button>
                            </div>
                          </div>
                        </el-card>
                      </el-col>
                    </div>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane label="零食小吃">
                  <span slot="label"><i class="el-icon-sugar">零食小吃</i></span>
                  <el-row>
                    <div style="margin-left: 5%;">
                      <el-col :span="5" v-for="(item,index) in itemInfo[0].listInfo" :key="item.gid"
                              style="margin: 0 3% 3% 0">
                        <el-card :body-style="{ padding: '0px' }" shadow="hover">
                          <img :src=imagDeal(item.picture) class="image">
                          <div style="padding: 8px;">
                            <span>{{item.name}}</span>
                            <div class="bottom clearfix">
                              <el-tooltip class="item" effect="dark" content="商品详情" placement="left">
                                <el-button @click="dialog(item)" type="primary" icon="el-icon-document" circle
                                           size="small"
                                           style="float: left"></el-button>
                              </el-tooltip>
                              <el-button class="button" @click="addCar(item)" type="primary" round size="small"
                                         icon="el-icon-shopping-cart-2" style="float: right">加入购物车
                              </el-button>
                            </div>
                          </div>
                        </el-card>
                      </el-col>
                    </div>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane label="洗护用品">
                  <span slot="label"><i class="el-icon-toilet-paper">洗护用品</i></span>
                  <el-row>
                    <div style="margin-left: 5%;">
                      <el-col :span="5" v-for="(item,index) in itemInfo[0].listInfo" :key="item.gid"
                              style="margin: 0 3% 3% 0">
                        <el-card :body-style="{ padding: '0px' }" shadow="hover">
                          <img :src=imagDeal(item.picture) class="image">
                          <div style="padding: 8px;">
                            <span>{{item.name}}</span>
                            <div class="bottom clearfix">
                              <el-tooltip class="item" effect="dark" content="商品详情" placement="left">
                                <el-button @click="dialog(item)" type="primary" icon="el-icon-document" circle
                                           size="small"
                                           style="float: left"></el-button>
                              </el-tooltip>
                              <el-button class="button" @click="addCar(item)" type="primary" round size="small"
                                         icon="el-icon-shopping-cart-2" style="float: right">加入购物车
                              </el-button>
                            </div>
                          </div>
                        </el-card>
                      </el-col>
                    </div>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane label="水果生鲜">
                  <span slot="label"><i class="el-icon-refrigerator">水果生鲜</i></span>
                  <el-row>
                    <div style="margin-left: 5%;">
                      <el-col :span="5" v-for="(item,index) in itemInfo[0].listInfo" :key="item.gid"
                              style="margin: 0 3% 3% 0">
                        <el-card :body-style="{ padding: '0px' }" shadow="hover">
                          <img :src=imagDeal(item.picture) class="image">
                          <div style="padding: 8px;">
                            <span>{{item.name}}</span>
                            <div class="bottom clearfix">
                              <el-tooltip class="item" effect="dark" content="商品详情" placement="left">
                                <el-button @click="dialog(item)" type="primary" icon="el-icon-document" circle
                                           size="small"
                                           style="float: left"></el-button>
                              </el-tooltip>
                              <el-button class="button" @click="addCar(item)" type="primary" round size="small"
                                         icon="el-icon-shopping-cart-2" style="float: right">加入购物车
                              </el-button>
                            </div>
                          </div>
                        </el-card>
                      </el-col>
                    </div>
                  </el-row>
                </el-tab-pane>
              </el-tabs>
            </template>
          </div>
        </div>

        <!--购物车-->
        <el-drawer
                title="购物车"
                :visible.sync="car_drawer"
                direction='rtl'
                size="75%"
                :before-close="handleClose">
          <span slot="title"><i class="el-icon-shopping-cart-1">购物车</i></span>
          <div style="width: 85%;margin: 0 auto">
            <el-steps :active="2">
              <el-step title="选择商品" icon="el-icon-sell"></el-step>
              <el-step title="查看购物车" icon="el-icon-shopping-cart-full"></el-step>
              <el-step title="进行付款" icon="el-icon-bank-card"></el-step>
            </el-steps>
            <el-divider><i class="el-icon-link"></i></el-divider>
            <template>
              <el-table
                      ref="multipleTable"
                      :data="carData"
                      max-height="500"
                      tooltip-effect="dark"
                      style="width: 100%"
                      @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="gid"
                        label="商品编号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="商品名称"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="number"
                        label="数量"
                        width="150">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="150">
                  <template slot-scope="scope">
                    <button class="el-icon-remove-outline" @click="decrement(scope.row)"
                            v-bind:disabled="scope.row.number <= 1"></button>
                    <button class="el-icon-circle-plus-outline" @click="increment(scope.row)"></button>
                  </template>
                </el-table-column>
                <el-table-column
                        label="移除"
                        width="150">
                  <template slot-scope="scope">
                    <button @click="removeHandle(scope.$index)" class="el-icon-delete-solid"></button>
                  </template>
                </el-table-column>
              </el-table>
              <div style="margin-top: 20px">
                <el-button @click="toggleSelection()" class="el-icon-close">取消选择</el-button>
                <el-button @click="handleDelete" class="el-icon-delete-solid" type="warning">删除所选</el-button>
                <div style="float: right">
                  <el-tag class="el-icon-data-analysis">总价格: {{carTotalPrice | showPrice}}</el-tag>
                  <el-button @click="purchaseSelection()" class="el-icon-s-finance">确认购买</el-button>
                </div>
              </div>
            </template>
          </div>
        </el-drawer>
        <!--个人账户-->
        <el-drawer
                title="个人账户"
                :visible.sync="personal_drawer"
                direction='ltr'
                size="75%"
                :before-close="handleClose">
          <span slot="title"><i class="el-icon-money">个人账户</i></span>
          <div style="width: 85%;margin: 0 auto">
            <div class="block" style="margin-left: 5%; vertical-align: middle">
              <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                      style="display: inline-block; vertical-align: middle;">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <el-tag style="margin-left: 5%;vertical-align: middle; font-size: large" class="el-icon-user">账户ID:
                {{personalData.cid}}
              </el-tag>
              <el-tag style="margin-left: 5%;vertical-align: middle; font-size: large"
                      class="el-icon-s-custom">账户名称: {{personalData.name}}
              </el-tag>
              <el-tag style="margin-left: 5%;vertical-align: middle; font-size: large" type="success"
                      class="el-icon-s-finance">账户余额: {{personalData.money}}
              </el-tag>
              <el-popover
                      placement="bottom"
                      width="270"
                      trigger="click">
                <el-input-number v-model="addMoney" :min="1" label="充钱" :precision="4"></el-input-number>
                <el-button @click="addAccount" size="mini" type="success" plain>确定</el-button>
                <el-button type="success" class="el-icon-circle-plus" size="mini" slot="reference">账户充值</el-button>
              </el-popover>
            </div>
            <el-divider><i class="el-icon-box"></i></el-divider>
            <template>
              <el-table
                      :data="orderData"
                      max-height="500"
                      style="width: 100%">
                <el-table-column type="expand" props="detail">
                  <template slot-scope="scope">
                    <el-table
                            :data="scope.row.detail"
                            stripe
                            style="width: 100%">
                      <el-table-column
                              prop="gid"
                              label="商品编号"
                              width="160">
                      </el-table-column>
                      <el-table-column
                              prop="good_name"
                              label="商品名称"
                              width="160">
                      </el-table-column>
                      <el-table-column
                              prop="price"
                              label="商品单价"
                              width="100">
                      </el-table-column>
                      <el-table-column
                              prop="num"
                              label="购买数量"
                              width="100">
                      </el-table-column>
                      <el-table-column
                              prop="spend"
                              label="商品花费"
                              width="100">
                      </el-table-column>
                      <el-table-column
                              label="商品操作"
                              width="100">
                        <template slot-scope="mini_scope">
                          <el-button type="danger" @click="goodRefund(mini_scope.row.sid,scope.row.oid)" size="mini"
                                     :disabled="mini_scope.row.is_return == 1">商品退款
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </template>
                </el-table-column>
                <el-table-column
                        label="订单号"
                        prop="oid"
                        width="200">
                </el-table-column>
                <el-table-column
                        label="订单日期"
                        width="200">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.buy_date }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                        label="订单总价"
                        width="200">
                  <template slot-scope="scope">
                    <el-tag class="el-icon-data-analysis">总价格: {{scope.row.total_spend | showPrice}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                        label="订单操作"
                        width="200">
                  <template slot-scope="scope">
                    <el-button type="danger" @click="orderRefund(scope.row)" :disabled="scope.row.is_return == 1">订单退款
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
        </el-drawer>
        <!--设置中心-->
        <el-drawer
                title="设置中心"
                :visible.sync="setting_drawer"
                direction='ttb'
                size="70%"
                :before-close="handleClose">
          <span slot="title"><i class="el-icon-setting">设置中心</i></span>
          <div style="width: 60%;margin: 0 auto">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="账户名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-select v-model="ruleForm.sex" placeholder="请选择您的性别">
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                  <el-option label="保密" value="保密"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="出生日期" required>
                <el-col :span="8">
                  <el-form-item prop="date">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date"
                                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="是否接收通知" prop="inform">
                <el-switch v-model="ruleForm.inform"></el-switch>
              </el-form-item>
              <el-form-item label="您的意见" prop="advice">
                <el-input type="textarea" v-model="ruleForm.advice"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-drawer>
        <!--商品详情-->
        <el-dialog
                title="商品详情"
                :visible.sync="dialogVisible"
                width="60%"
                :before-close="handleClose">
          <el-card :body-style="{ padding: '0px' }">
            <!--不知为何不能用图片地址处理函数-->
            <!--加上undefined判别就可以了-->
            <img :src=imagDeal(showData.picture) class="image" style="width: 40%;float: left">
            <div style="width: 60%;float: left">
              <div style="padding: 20px;margin-bottom: 20px">
                <span style="margin-left: 5%;color: #409EFF;font-size: large;vertical-align:top;float: left">
                  <i class="el-icon-location"></i>
                  商品编号：
                </span>
                <span style="margin-left: 1%;color: #67C23A;font-size: large;vertical-align:top;float: left">{{showData.gid}}</span>
              </div>
              <div style="padding: 20px;margin-bottom: 20px;text-align: center">
                <span style="margin-left: 5%;color: #409EFF;font-size: large;vertical-align:middle;float: left">
                  <i class="el-icon-s-claim"></i>
                  商品名称：
                </span>
                <span style="margin-left: 1%;color: #67C23A;font-size: large;vertical-align:middle;float: left">{{showData.name}}</span>
                <span style="margin-left: 5%;vertical-align:middle;float: left">
                  <el-rate
                          v-model="showData.value"
                          :colors="colors"
                          style="display: inline-block;"
                          disabled
                          show-score
                          text-color="#ff9900"
                          score-template="{value}">
                  </el-rate>
                </span>
              </div>
              <div style="padding: 20px;margin-bottom: 20px">
                <span style="margin-left: 5%;color: #409EFF;font-size: large;vertical-align:top;float: left">
                  <i class="el-icon-coin"></i>
                  商品价格：
                </span>
                <span style="margin-left: 1%;color: #67C23A;font-size: large;vertical-align:top;float: left">{{showData.price}}</span>
              </div>
              <div style="padding: 20px;margin-bottom: 20px">
                <span style="margin-left: 5%;color: #409EFF;font-size: large;vertical-align:top;float: left">
                  <i class="el-icon-notebook-1"></i>
                  商品售出：
                </span>
                <span style="margin-left: 1%;color: #67C23A;font-size: large;vertical-align:top;float: left">{{showData.sold}}</span>
                <span style="margin-left: 3%;color: #409EFF;font-size: large;vertical-align:top;float: left">
                  <i class="el-icon-notebook-2"></i>
                  商品剩余：
                </span>
                <span style="margin-left: 1%;color: #67C23A;font-size: large;vertical-align:top;float: left">{{showData.rest}}</span>
              </div>
              <div style="padding: 20px;margin-bottom: 20px">
                <span style="margin-left: 5%;color: #409EFF;font-size: large;vertical-align:top;float:left;">
                  <i class="el-icon-tickets"></i>
                  商品介绍：
                </span>
                <span style="margin-left: 1%;color: #67C23A;font-size: large;vertical-align:top;float:left;width: 35%;">{{showData.description}}</span>
              </div>
            </div>
          </el-card>
          <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>
      </el-main>
    </el-container>
  </template>
</div>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        //请求数据
        baseUrl: "http://122.152.225.202:8080/",
        //购物车
        carData: [],
        //购物车选中物品
        multipleSelection: [],
        //个人信息
        personalData: {
          cid: '20191125',
          name: '李银河',
          money: 1
        },
        //订单
        orderData: [{
          oid: 1,
          buy_date: '2019-11-11',
          total_spend: 0,
          detail: [{
            gid: 1,
            good_name: '可口可乐',
            num: 1,
            price: 5.00,
            spend: 0
          }, {
            gid: 2,
            good_name: '百事可乐',
            num: 1,
            price: 5.00,
            spend: 0
          }, {
            gid: 3,
            good_name: '沙宣',
            num: 1,
            price: 9.00,
            spend: 0
          }]
        }],
        //个人中心头像
        imageUrl: './3.jpg',
        //展示商品信息（四类）
        //目前只接收到一类，所以全都是同一类
        itemInfo: [{
          type: 'drink',
          listInfo: [{
            gid: '20191125',
            name: '柠檬来啦',
            price: '6.00',
            description: '仍然超好吃还是超好吃特别好吃好吃非常好吃好吃好吃好吃好吃好吃还是超好吃特别好吃好吃非常好吃好吃好吃好吃好吃好吃',
            picture: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
          }]
        }, {
          type: 'snake',
          listInfo: [{}]
        }, {
          type: 'living',
          listInfo: [{}]
        }, {
          type: 'fruit',
          listInfo: [{}]
        }],
        //商品详情弹窗
        dialogVisible: false,
        //评星等级的颜色
        //目前关闭评星功能，只展示
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
        //商品详情的数据
        //通过按钮传递
        showData: {},
        //三个抽屉：购物车car、个人账户personal、个人信息设置setting
        car_drawer: false,
        personal_drawer: false,
        setting_drawer: false,
        //中、左、右三个轮播图
        centerScrollImag: [{
          id: 1,
          imag: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3196087098,3117581583&fm=26&gp=0.jpg'
        }, {
          id: 2,
          imag: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=319967988,3334427849&fm=26&gp=0.jpg'
        }],
        leftScrollImag: [{
          id: 1,
          imag: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3588268478,4279342604&fm=26&gp=0.jpg'
        }, {
          id: 2,
          imag: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2200516794,2485042289&fm=26&gp=0.jpg'
        }],
        rightScrollImag: [{
          id: 1,
          imag: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3832709710,1806650980&fm=26&gp=0.jpg'
        }, {
          id: 2,
          imag: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=863616212,4145549296&fm=26&gp=0.jpg'
        }],
        //个人信息设置表单提交规则
        ruleForm: {
          name: '',
          sex: '',
          date: '',
          inform: true,
          type: [],
          resource: '',
          advice: ''
        },
        rules: {
          name: [
            {required: true, message: '请设置您的账户名称', trigger: 'blur'},
            {min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur'}
          ],
          sex: [
            {required: true, message: '请选择您的性别', trigger: 'change'}
          ],
          date: [
            {type: 'date', required: true, message: '请选择您的出生日期', trigger: 'change'}
          ],
          advice: [
            {required: true, message: '请填写您的意见、建议与评价，投诉、不满或鼓励', trigger: 'blur'}
          ]
        },
        //充值余额计数初值
        addMoney: 1,
      };
    },
    //实例创建后调用刷新请求数据
    created() {
      this.load();
    },
    methods: {
      //请求数据
      load() {
        let self = this;
        //请求商品展示数据
        myGet(this.baseUrl + 'Visitor/scanGood', {'limit': 100}, function (response) {
          if (response.result === true) {
            self.itemInfo = self.dataDeal((response).data.detail);
          }
        });
        //请求个人信息数据
        myGet(this.baseUrl + 'Coumser/getInfo', {}, function (response) {
          if (response.result === true) {
            self.personalData = response.data;
          }
        });
        //请求购物订单数据
        myGet(this.baseUrl + 'Coumser/getBuying', {limit: 100}, function (response) {
          if (response.result === true) {
            self.orderData = response.data.detail;
          }
        });
        //把本地购物车的值取出
        this.carData = JSON.parse(localStorage.getItem('localCarData'));
        //清除本地缓存
        // this.clearLocalstroage();
      },
      //购物车选择
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //删除购物车所选物品
      deleteSelection() {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          for (let j = 0; j < this.carData.length; j++) {
            if (this.multipleSelection[i] === this.carData[j]) {
              this.carData.splice(j, 1);
              j--;
            }
          }
        }
        //更新本地购物车
        this.localCar();
      },
      //购买购物车所选物品
      purchaseSelection() {
        //有选上物品才请求/上传数据
        if (this.multipleSelection.length !== 0) {
          //转换为JSON格式
          let tempObj = {};
          for (let i = 0; i < this.multipleSelection.length; i++) {
            tempObj[this.multipleSelection[i].gid] = this.multipleSelection[i].number;
          }
          let submitObj = {};
          submitObj = JSON.stringify(tempObj);
          let self = this;
          myPost(this.baseUrl + 'Coumser/buy', {order: submitObj}, function (response) {
            if (response.result === true) {
              //购买成功，把物品从购物车移走
              for (let i = 0; i < self.multipleSelection.length; i++) {
                for (let j = 0; j < self.carData.length; j++) {
                  if (self.carData[j] === self.multipleSelection[i]) {
                    self.carData.splice(j, 1);
                    j--;
                  }
                }
              }
              //清空选择数组里的东西
              self.multipleSelection = [];
              //更新本地购物车
              self.localCar();
              //刷新数据
              self.load();
              self.$message({
                message: response.msg,
                type: 'success'
              });
            } else {
              self.$message.error(response.msg);
            }
          });
        } else {
          this.$message.error('您还没选好东西哦，别忘了勾上呀！');
        }
      },
      //购物车数目加减
      increment(row) {
        row.number++;
      },
      decrement(row) {
        row.number--;
      },
      //删除购物车相应行的商品
      removeHandle(index) {
        this.carData.splice(index, 1);
      },
      //整个订单退款
      orderRefund(order) {
        this.$confirm('确认退款该订单？', {type: 'warning'})
            .then(_ => {
              let self = this;
              for (let i = 0; i < order.detail.length; i++) {
                myPost(this.baseUrl + 'Coumser/refunds', {
                  'oid': order.oid,
                  'sid': order.detail[i].sid
                }, function (response) {
                  if (response.result === true) {
                    //刷新数据
                    self.load();
                    self.$message({
                      message: response.msg,
                      type: 'success'
                    });
                  } else {
                    self.$message.error(response.msg);
                  }
                });
              }
            })
            .catch(_ => {
              this.$message({
                message: '操作已取消！',
                showClose: true,
                type: 'warning'
              });
            });
      },
      //某个订单里单一商品退款
      goodRefund(sid, oid) {
        let self = this;
        myPost(this.baseUrl + 'Coumser/refunds', {'oid': oid, 'sid': sid}, function (response) {
          if (response.result === true) {
            //刷新数据
            self.load();
            self.$message({
              message: response.msg,
              type: 'success'
            });
          } else {
            self.$message.error(response.msg);
          }
        });
      },
      //头像上传相关
      handleAvatarSuccess(res, file) {
        //URL可能会在webkit浏览器中添加前缀，因此请使用：
        //var url = (URL || webkitURL).createObjectURL(...);
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //加入购物车
      addCar(newItem) {
        if (this.carData === null) {
            let tempCarData = [];
            tempCarData.push(newItem);
            this.carData = tempCarData;
          //更新本地购物车
          this.localCar();
        } else {
          //加入同一id物品只改变数量
          let itemIndex = this.carData.findIndex(oldItem => oldItem.gid === newItem.gid);
          if (itemIndex === -1) {
            this.carData.push(newItem);
          } else {
            this.carData[itemIndex].number++;
          }
          this.addCarSuccess(newItem);
          //更新本地购物车
          this.localCar();
        }
      },
      //抽屉关闭确认
      handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {
            });
      },
      //商品详情打开以及传值
      dialog(item) {
        this.dialogVisible = true;
        this.showData = item;
      },
      //加入购物车成功提示
      addCarSuccess(item) {
        this.$message({
          showClose: true,
          message: '成功将' + item.name + '加入购物车',
          type: 'success'
        });
      },
      //三个抽屉打开
      carDrawer() {
        this.car_drawer = true;
      },
      personalDrawer() {
        //重新加载个人中心数据
        this.load();
        this.personal_drawer = true;
      },
      setInfoDrawer() {
        this.setting_drawer = true;
      },
      //删除选择前的确认
      handleDelete() {
        this.$confirm('确认删除？', {type: 'warning'})
            .then(_ => {
              this.deleteSelection();
              this.$message({
                message: '删除成功',
                showClose: true,
                type: 'success'
              });
            })
            .catch(_ => {
              this.$message({
                message: '操作已取消',
                showClose: true,
                type: 'warning'
              });
            });
      },
      //离开超市
      quitMarket() {
        this.$confirm('确认退出超市？', {type: 'warning'})
            .then(_ => {
              let self = this;
              myGet(this.baseUrl + 'Visitor/logout', {}, function (response) {
                if (response.result === true) {
                  self.$message({
                    message: response.msg,
                    showClose: true,
                    type: 'success'
                  });
                } else {
                  self.$message.error(response.msg);
                }
              });
            })
            .catch(_ => {
              this.$message({
                message: '操作已取消，留下来买买买！',
                showClose: true,
                type: 'warning'
              });
            });
      },
      //个人信息设置表单提交
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$message({
              message: '提交成功!',
              type: 'success'
            });
          } else {
            console.log('提交失败!!');
            return false;
          }
        });
      },
      //表单重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$message('已重置');
      },
      //充值
      addAccount() {
        let self = this;
        myPost(this.baseUrl + 'Coumser/recharge', {
          'cid': this.personalData.cid,
          'money': this.addMoney
        }, function (response) {
          if (response.result === true) {
            //充值后更新数据
            self.personalData = response.data;
            self.addMoney = 1;
            self.$message({
              message: response.msg,
              type: 'success'
            });
          } else {
            self.$message.error(response.msg);
          }
        });
      },
      //商品展示数据分类
      //因为无多种类型商品数据
      //目前只分出一种
      dataDeal(data) {
        let listArr = [];
        data.forEach(function (el, index) {
          for (let i = 0; i < listArr.length; i++) {
            //把同一种类的分到同一展示数组
            if (listArr[i].type === el.type) {
              listArr[i].listInfo.push({
                gid: el.gid,
                name: el.name,
                price: el.price,
                description: el.description,
                picture: el.picture,
                number: 1,
                rest: el.rest,
                sold: el.sold,
                value: 4.5
              });
              return;
            }
          }
          //出现新的类别时
          listArr.push({
            type: el.type,
            listInfo: [{
              gid: el.gid,
              name: el.name,
              price: el.price,
              description: el.description,
              picture: el.picture,
              //加入购物车数量固定
              //要买多需去购物车里面加购
              number: 1,
              rest: el.rest,
              sold: el.sold,
              //评星固定
              //无相应接口
              value: 4.5
            }]
          });
        });
        return listArr;
      },
      //图片处理函数
      //商品详情页一直无法成功使用
      //处理后可以使用了
      imagDeal(url) {
        //接收到未知错误图片就直接置为null
        //判断是否为undefined应该用typeof 不能直接判断
        //url = ...||...
        if (typeof (url) === 'undefined') {
          return null;
        }
        //识别是否有域名
        if (url.substr(0, 7).toLowerCase() === "http://" || url.substr(0, 8).toLowerCase() === "https://") {
        } else {
          //域名加上传来的相对路径
          //因为传来的路径有时候不加/，有时候有
          url = 'http://122.152.225.202:8080' + url;
        }
        return url;
      },
      //把购物车存在本地
      localCar() {
        if (!window.localStorage) {
          alert("浏览器不支持localstorage");
          return false;
        } else {
          let storage = window.localStorage;
          storage.setItem('localCarData', JSON.stringify(this.carData));
        }
      },
      //把头像存在本地
      //存储失败，地址一直在变？存完读取出来总是找不到，就直接写固定了 blob对象
      localImag() {
        if (!window.localStorage) {
          alert("浏览器不支持localstorage");
          return false;
        } else {
          let storage = window.localStorage;
          storage.setItem('localImag', JSON.stringify(this.imageUrl));
        }
      },
      //清除本地购物车和本地头像
      clearLocalstroage() {
        console.log('clear');
        localStorage.removeItem('localCarData');
        localStorage.removeItem('localImag');
      }
    },
    //计算购物车总价
    //实际应实时请求
    //因为为本地购物车
    //此处由前端简单计算
    computed: {
      carTotalPrice() {
        return this.multipleSelection.reduce(function (preValue, item) {
          return preValue + item.price * item.number;
        }, 0)
      },
    },
    //过滤，改变展示价格样式
    filters: {
      showPrice(price) {
        return '¥' + price.toFixed(2)
      }
    },
  })
</script>
</body>
</html>